<template>
  <div>
    <!-- 头部 -->
    <user-header :headerData="headerData" @show="_show_qrcode()"></user-header>
    <!-- 导航 -->
    <user-nav :current="1" :memberData="memberData"></user-nav>
    <!-- 提现 -->
    <div class="accountPanel-links">
      <section class="accountPanel">
        <div class="iner-bor">
          <div @click="Jump('commissionContent')">
            <div class="item fl">
              <i class="fontAliBaba" v-if="parseFloat(remaining_commission)" v-html="scaleGoodsPriceNoMarkFn(remaining_commission)"></i>
              <i class="fontAliBaba price-scale " v-else><span class="num-font">{{remaining_commission}}</span></i>
              <p>{{memberData.ftitle_commission_left}}</p>
            </div>
            <div class="item fl" style="width:145px;" v-if="hide_commission_dz">
              <i class="fontAliBaba" v-if="parseFloat(wait_commission)" v-html="scaleGoodsPriceNoMarkFn(wait_commission)"></i>
              <i class="fontAliBaba price-scale" v-else><span class="num-font">{{wait_commission}}</span></i>
              <p>待收益</p>
            </div>
          </div>
          <span v-if="!ltsn_dz" @click="Jump('myCommission','fxs')" class="fr btn-sign">
            <i></i>提现
          </span>
        </div>
        <div class="line-bor"></div>
      </section>
      <div class="style2-links clearfix">
        <div @click="Jump('fenxiaoGoods')" class="link" v-if="memberData.show_fxProduct">
          <span class="num fontAliBaba">{{fenxiao_goods_count}}</span>
          <span class="title">{{memberData.ftitle_item}}</span>
        </div>
        <div @click="Jump('nextLevelAgent')" class="link" v-if="memberData.show_myAgent">
          <span class="num fontAliBaba">{{next_lever_agent_count}}</span>
          <span class="title">{{memberData.ftitle_next_agent}}</span>
        </div>
        <div @click="Jump('nextLevelUser')" class="link" v-if="memberData.show_myUser">
          <span class="num fontAliBaba">{{next_lever_user_count}}</span>
          <span class="title">{{memberData.ftitle_next_user}}</span>
        </div>
        <div @click="Jump('fenxiaoOrder')" class="link" v-if="memberData.show_fxOrder">
          <span class="num fontAliBaba">{{fenxiao_order_count}}</span>
          <span class="title">{{memberData.ftitle_fx_order}}</span>
        </div>
      </div>
    </div>
    <!-- TODO 分销中心我的服务要特殊处理 -->
    <!-- 我的服务 -->
    <template>
      <fxs-index :fxsInfo="fxsInfo" v-if="template_style == 1" @showQrcode="_show_qrcode()" @showFxsEwm="showFxsEwm()"></fxs-index>
      <fxs-index2 :fxsInfo="fxsInfo" v-else-if="template_style == 2"  @showQrcode="_show_qrcode()" @showFxsEwm="showFxsEwm()"></fxs-index2>
    </template>

    <!-- <van-cell is-link @click="_show_qrcode()">展示弹出层</van-cell> -->
    <van-popup v-model="is_show_qrcode" class="code-pop">
      <img :src="qrcode_url" alt @longpress="saveCodeImage(qrcode_url)"/>
    </van-popup>
    <van-popup v-model="is_show_fxscode" class="code-pop">
      <img :src="fxscode_url" alt @longpress="saveCodeImage(fxscode_url)"/>
    </van-popup>
  </div>
</template>

<script>
import Vue from 'vue'
import { mapGetters } from 'vuex'
import userNav from '@/views/user/components/nav/index'
import userHeader from '@/views/user/components/header/index'
import fxsIndex from '@/views/user/fxs/components/fxsIndex/index'
import fxsIndex2 from '@/views/user/fxs/components/fxsIndex2/index'

// import ad_img from '@img/user/ad.png'
import { getFxs } from '@/api/user/fxs/fxsApi'
import { getCommissionIncome } from '@/api/user/user'
import { scaleGoodsPriceNoMark } from '@/utils/index.js'
import small from '@/smallapp/small'
import { Popup } from 'vant'

Vue.use(Popup)
export default Vue.extend({
  data() {
    return {
      template_style: 1,
      memberData: {},
      headerData: {
        bgImg: 'https://img.wifenxiao.com/h5-wfx/images/user/member/user_style3_bg_black.png',
        userImg: 'https://img.wifenxiao.com/h5-wfx/images/default_avatar.jpg',
        nickname: '',
        mobile: '',
        show_level: true,
        rank_name: '',
        end_time: '',
        letterCount: 0,
        show_qrcode: true,
        show_fx_upgrade: false, // 控制分销等级显示隐藏
        is_show_upgrade_button: 0 // 是否为最高等级
      },
      fxsInfo: {},

      qrcode_url: '',
      fxscode_url: '',

      remaining_commission: '--',
      wait_commission: '--',
      fenxiao_goods_count: 0,
      next_lever_agent_count: 0,
      next_lever_user_count: 0,
      fenxiao_order_count: 0,

      is_show_qrcode: false,
      is_show_fxscode: false,
      ltsn_dz: false,
      hide_commission_dz: true
    }
  },
  created() {
    // TODO 小程序使用全局的shopId
    let shop = small.globalData.shopId
    const ltsn_dz = this.$_shop('$_ltsn_dz', shop)
    this.ltsn_dz = ltsn_dz
    this.init()
    // console.log('分销商品排序是原接口   需要替换新接口')
  },
  methods: {
    init() {
      this.style = this.$route.query.style
      this.$loadingWrap.show()
      setTimeout(() => {
        this.$loadingWrap.close()
      }, 50000)

      getFxs().then((res) => {
        this.$loadingWrap.close()
        if (res.status == 1) {
          const resData = res.data
          // TODO 小程序处理 wxConfig.template_style
            resData.template_style ? this.template_style = resData.template_style : ''
            wx.setNavigationBarTitle({
              title: res.data.common_center_parameter.ftitle_agent
            })
          // 导航数据
          this.memberData = Object.assign(resData.common_center_parameter, resData.common_center_renovation_parameter)
          // console.log(this.memberData)
          this.memberData.user_type = resData.user_identity.user_type
          this.memberData.is_agent = resData.user_identity.is_agent
          this.memberData.is_show_distributor = resData.is_show_distributor
          this.memberData.system_function_model = resData.system_function_model
          this.memberData.is_check_dhs = resData.is_check_dhs
          this.memberData.is_show_dhs = resData.is_show_dhs
          this.memberData.is_wx = resData.is_wx
          this.memberData.is_app = resData.is_app
          this.memberData.is_show_agent = resData.is_show_agent
          this.memberData.is_show_gys = resData.is_show_gys
          this.memberData.supplier_flag = resData.supplier_flag
          this.memberData.is_tgy = resData.is_tgy
          this.memberData.is_dls = resData.is_dls
          this.memberData.ftitle_gys_center = resData.ftitle_gys_center
          // x+1 链动中心 start
          this.memberData.is_chaining = resData.is_chaining || 0
          this.memberData.is_show_chaining = resData.is_show_chaining
          // x+1 链动中心 end
          // 复制中心 start
          this.memberData.has_replicate_rank = resData.has_replicate_rank || 0
          this.memberData.is_show_replicate_center = resData.is_show_replicate_center
          // 复制中心 end
          //  头部数据打包
          if (resData.common_center_renovation_parameter.top_bg != '') {
            this.headerData.bgImg = resData.common_center_renovation_parameter.top_bg
          }
          // TODO 头像处理
          this.headerData.userImg = resData.common_center_parameter.avatar.indexOf('http') > -1 ? resData.common_center_parameter.avatar : 'https://img.wifenxiao.com/h5-wfx/images/default_avatar.jpg'
          this.headerData.nickname = resData.user_info.nickname
          this.headerData.mobile = resData.user_info.mobile
          this.headerData.show_level = resData.user_nickname.show_level
          this.headerData.rank_name = resData.agent_rank_name
          this.headerData.end_time = resData.agent_end_time
          this.headerData.letterCount = resData.common_center_parameter.letterCount
          this.headerData.show_qrcode = resData.common_center_renovation_parameter.show_qrcode
          this.headerData.ftitle_level = resData.common_center_parameter.ftitle_level
          // 控制分销等级显示隐藏
          this.headerData.show_fx_upgrade = resData.common_center_renovation_parameter.show_fx_upgrade
          // 是否为最高等级
          this.headerData.is_show_upgrade_button = resData.is_show_upgrade_button
          this.qrcode_url = resData.qrcode_url
          if (wx.getExtConfigSync().appApiUrl) {
            this.fxscode_url = wx.getExtConfigSync().appApiUrl + '/Public/qrcode?link= ' + resData.agent_apply_link
          } else {
            this.fxscode_url = '/Public/qrcode?link= ' + resData.agent_apply_link
          }
          //  link数据
          // this.remaining_commission = resData.user_info.remaining_commission
          // this.wait_commission = resData.wait_commission
          this.fenxiao_goods_count = resData.fenxiao_goods_count
          this.next_lever_agent_count = resData.next_lever_agent_count
          this.next_lever_user_count = resData.next_lever_user_count
          this.fenxiao_order_count = resData.fenxiao_order_count
          // 图标数据
          this.fxsInfo = Object.assign(resData.common_center_parameter, resData.common_center_renovation_parameter)
          this.fxsInfo.is_user_img = resData.user_nickname.is_user_img
          this.fxsInfo.user_img_link = resData.user_nickname.user_img_link
          this.fxsInfo.user_img_ggt = resData.user_nickname.user_img_ggt
          this.fxsInfo.is_app_open = resData.user_nickname.is_app_open
          this.fxsInfo.dataset_fxs = resData.user_nickname.dataset_fxs // 自定义项
          this.fxsInfo.superior_user_id = resData.user_info.superior_user_id
          this.fxsInfo.is_store_log = resData.is_store_log
          this.fxsInfo.superior_user = resData.superior_user

          this.fxsInfo.is_sej_dz = resData.is_sej_dz || 0
          // 定制 贵州己乐识界信息科技 分红奖励
          this.fxsInfo.is_fhjl = resData.is_fhjl || 0
          // 分红 定制需求
          this.fxsInfo.is_five_bonus_dz = resData.is_five_bonus_dz || 0
        } else {
          this.$Error(res.msg)
        }
      })
      getCommissionIncome().then((res) => {
        if (res.status == 1) {
          this.remaining_commission = res.data.remaining_commission
          this.wait_commission = res.data.wait_commission
          // 隐藏定制
          this.hide_commission_dz = !(res.data.hide_commission_dz > 0)
        } else {
          this.$Error(res.msg)
        }
      })
    },
    // 展示二维码
    _show_qrcode() {
      this.is_show_qrcode = !this.is_show_qrcode
    },
    saveCodeImage(url) {
      small.saveImage(url)
    },
    showFxsEwm() {
      this.is_show_fxscode = !this.is_show_fxscode
    },
    Jump(url, type) {
      const data = { type }
      this.$JumpPath(this, url, data)
    },
    scaleGoodsPriceNoMarkFn(price) {
      return scaleGoodsPriceNoMark(price)
    }
  },
  computed: {
    ...mapGetters(['wxConfig'])
  },
  components: {
    userNav,
    userHeader,
    fxsIndex,
    fxsIndex2
  }
})
</script>

<style lang="scss">
@import 'src/styles/user/index.scss';
</style>
